<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报告</title>
</head>
<style>
     .qw{
              font-family: "Times New Roman", Times, serif;
              color: red;
              text-align: center;
              
            }
     .s{
        text-align: center;
     }       
</style>
<body>
    <h1 class="qw">报告</h1>
    <h2>一人组</h2>
    <p1>人员：周芯豪 学号：0223224 班级：2213班</p1>
    <h2>网站介绍</h2>
    <p>名称：个人网站及春节主题网站。 主题：个人生活，春节。 选题目的：临近春节写一个关于春节主题的，写个人网站记录生活。
    </p>
    <h2>网站设计</h2>
    <p>有白天模式与夜间模式的转换。响应式布局设计，单页显示模式，简约风，全网站色调统一。</p>
    <h2>网站内容</h2>
    <p>用到的主要技术是css与js，工具vscode及Bootstrap网站。本网站部分效果基于Bootstrap网站实现，部分代码取自Bootstrap网站。实现了float+clear布局, position定位（absolute, fixed)，文字悬浮于图片上，伪类，伪元素</p>
    <p>一些效果如下：</p>
    <h3 class="qw">网站整体效果展示</h3>
       <p class="s"> <video  width="400" controls>
            <source src="124.avi" type="video/mp4">
            <source src="124.ogg" type="video/ogg">
          </video>
        </p>
          <h3 class="qw">部分子网站效果展示</h3>
          <p class="s"><video width="400" controls>
              <source src="123.avi" type="video/mp4">
              <source src="123.ogg" type="video/ogg">
            </video>
        </p>
        <h3 class="qw">网站局部细节效果展示</h3>
        <p class="s"> <video width="400" controls>
                <source src="125.avi" type="video/mp4">
                <source src="125.ogg" type="video/ogg">
              </video>
            </p>
            <h3 class="qw">网站等待过渡细节，夜晚与白天模式转换，不同模式下的文字渐变效果</h3>
        <p class="s"> <video width="400" controls>
                <source src="hk.avi" type="video/mp4">
                <source src="hk.ogg" type="video/ogg">
              </video>
            </p>
    <p>主页网站使用了隐藏二级导航栏，点击网页顶部右侧三杆可打开， 风格统一和谐 ，布局美观，页面整洁,文字内容和图片要与网页的主题相关，里面有本次的所有八个子网页。主网页中用script分为了几个板块：关于春节的介绍，我的网站（将自己这个学期所写的网站归纳在其中），我的朋友圈，素材投稿等。本次本来想写一个由近到远视频图的滑动效果，但是太复杂，太难，写了很久，只能删除了。
    </p>
    <p>亮点及拓展点：1. 主网站及一些子网站都有白天模式与夜间模式的转换。（该步的形成很困难，耗时很久）2. 将鼠标移动至主网页图片时会有图片细节放大效果，且描述词悬浮在图片上，点击可跳往相对应网站。
        3. 素材投稿填写信息时，填写正确填写错误都会有相关的提示。4. 关于春节的子网页中，图片有类似视频网站一样的滚动滑动效果。5.主网页及一些子网页都有侧边栏，比如主网页的右侧有百度链接的侧边栏，春节子网页中左下角有用fixd固定的侧边栏。6 .有酷炫的动画效果， 适配手机（响应式设计）， 使用flex, grid布局，并且有明显的效果， JS动态效果.7.响应式设计，全屏弹出菜单。8.网站等待过渡细节，夜晚与白天模式转换，不同模式下的文字渐变效果。9.主网页下面和春节春运网站下面都有注册栏和发送栏。</p>
    <h2>最终结果与讨论</h2>
    <p>自我评价：网站设计美观，简约，滚动过渡流畅，网站自适应各种分辨率。</p>
    <p>总结：历经很长时间，终于完成了此次作业，在写网站过程中，我翻阅了大量的网站的源代码，及很多学习css和js的网站，在写这次网站的过程中，我学到了很多知识和很多在课堂上没有学习到的知识，受益匪浅。</p>
    <p>展望：将来自己也会学习更多网页设计的语言和更多知识，写出和设计出更美观更有创意的网站。</p>
    <section class="m-page-navigation">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="h-titles h-navs">
              <a href="index.html">
                <span class="nav-arrow scrolla-element-anim-1 scroll-animate" data-animate="active">
                  点击返回主页
                </span>
                <span class="h-title splitting-text-anim-2 scroll-animate" data-splitting="chars" data-animate="active">
                  
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
</body>
</html>